<template>
  <div id="app">
    <el-card>
      <h3>导入员工信息</h3>
      <el-alert title="警告提示的文案" type="warning" show-icon />
      <excel
        class="myexcel"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
      />
    </el-card>
  </div>
</template>

<script>
import { uploadUserAPI } from '@/api/index'
export default {
  methods: {
    // 得到数据前触发的函数
    beforeUpload(file) {
      // 判断稳健的大小是否超过2M
      const bool = file.size < 2 * 1024 * 1024
      if (!bool) {
        // 文件体积大于2M时触发
        this.$message.error('文件体积不能大于2M')
      }
      return bool
    },
    // 转换数据成功之后的回调函数
    async onSuccess(data) {
      // 将数据源中的中文属性改为英文属性
      //  1.0 定义一个翻译的字典
      const keyObj = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      //  2.0 遍历数据源，将所有的中文根据字典替换为英文
      //    map：用来遍历数组，返回一个新的数组
      const resData = data.results.map((item) => {
        // 创建一个新的对象，用来保存英文的属性
        const newObj = {}
        // 得到 item 中的所有的属性
        Object.keys(item).forEach((key) => {
          // newkey
          const newkey = keyObj[key]
          // newvalue
          // const newvalue = item[key] 因为定义了时间转换的方法，所以要修改这里的代码
          let newValue
          if (key === '入职日期' || key === '转正日期') {
            newValue = this.dayToDate(item[key])
          } else {
            newValue = item[key]
          }
          newObj[newkey] = newValue
        })
        return newObj
      })
      // 提交数据到服务器
      await uploadUserAPI(resData)
      // 提示成功
      this.$message.success('导入成功')
      // 跳转到回员工列表页面
      this.$router.push('/employees')
    },
    // 定义一个方法，将天数转为时间
    dayToDate(days) {
      // 将天数转为时间戳
      const times = (days - 1) * 24 * 60 * 60 * 1000
      // 将时间转为时间戳
      const mytime = new Date(times)
      // 因为计算机标准时间从1970年1月1日开始，而excel标准时间从1900年一月一日开始，所以要将年份减去70
      mytime.setFullYear(mytime.getFullYear() - 70)
      // 将得到的时间数据返回出去
      return mytime
    }
  }
}
</script>

<style lang="scss">
#app {
  margin: 25px;
  h3 {
    text-align: center;
  }
  .myexcel {
    margin: 100px 0;
  }
}
</style>
